<template>
	<view>
		<!-- #ifdef H5 -->
		<view style="padding-bottom: 10rpx;"></view>
		<!-- #endif -->
		<view class="" :style="[{height:CustomBar + 'px',}]"  @click.stop="titleMen()" >
			<view class="cu-bar fixed" :style="[
				{'height':CustomBar+'px'},
				{'padding-top':StatusBar+'px'},
				{'background-color':bgTopImg},
				{'opacity':opacity},
				]">
				<view class="">
					<view class="back-wrapper margin-left-lg action " @click="BackPage" v-if="isBack"
						:style="{'top':StatusBar + 'px'}">
						<text class="cuIcon-back" style="font-size: 32rpx;" :style="{'color':backBg}"
							v-if="isBackLeft"></text>
						<slot name="backText">
							<text :style="{'color':backTextStyle}">
								{{backText}} 
							</text>
						</slot>
					</view>
					<view @click="handleToUser" v-if="avatar">
						<slot name="avatar">
							<dsl-avatar style="margin-left: 30rpx;" :src="avatar" shape="round" />
						</slot>
					</view>
				</view>
				<view class="action-right ">
					<view @click="handleToMessage" v-if="msgIcon">
						<slot name="avatar">
							<dsl-icon :name="msgIcon" style="margin-right: 60rpx; font-size: 35rpx; font-weight: bold;">
							</dsl-icon>
						</slot>
					</view>
				</view>
				<view class="content" :style="{'top':StatusBar + 'px'}">
					<slot name="content">
						<text :style="{'color':textTitle}" >  
							{{title}}<text class="cuIcon-unfold margin-left-xs" style="color: #000000;" v-if="isUnfold"></text>
						</text>
					</slot>
				</view>

				<view class="padding-right align-center" @click="rightSubMen">
					<view v-if="isShareHome" :class="{'margin-right':isTeacherUser==true}" @click.stop="shareHome()">
						<image src="/static/icon/icon_fenxiangdianpu.png" class="icon_right"></image>
					</view>
					<image :src="src" class="icon_right"></image>
					<!-- 省略图标 -->
					<view v-if="isOmit">
						<image src="/static/icon/icon_shenglue.png" class="icon_right"></image>
					</view>
					<!-- 删除图标 -->
					<view v-if="isDelete">
						<image src="/static/icon/icon_detail.png" class="icon_right"></image>
					</view>
					<view class="button" v-if="button">
						{{buttonText}}
					</view>
					<!-- 收藏图标 -->
					<view v-if="isLike=='0'" @click.stop="rightLike()">
						<image src="/static/icon/icon_sc.png" class="icon_right"></image>
					</view>
					<view v-if="isLike=='1'" @click.stop="rightLike()">
						<image src="/static/icon/icon_sc2.png" class="icon_right"></image>
					</view>
					<view v-if="isScreen">
						<image src="/static/teacher/icon_shaix.png" mode="" class="icon_right"></image>
					</view>

					<!-- 分享图标 -->
					<view class="margin-left" v-if="isShare" @click.stop="rightShare()">
						<image src="/static/icon/icon_dafenx.png" class="icon_right"></image>
					</view>
					<!-- 文字 -->
					<view @click.stop="rightForm()">
						<slot name="content">
							<text :style="{'color':titleRightStyle}">
								{{titleRight}}
							</text>
							<text :style="{'color':titleRightStyle}" class="margin-left" 
							v-if="isAll" @click.stop='allMen()'>
								全部
							</text>
						</slot>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			}
		},
		name: 'dsl-navbar',
		computed: {
			height() {
				return this.CustomBar + 'px'
			},
			paddingTop() {
				return this.StatusBar + 'px'
			},
			titleData() {
				return this.title
			},
			
		},
		watch: {
			titleData() {
				uni.setNavigationBarTitle({ //设置标题
					title: this.title
				})
			}
		},
		onLoad() {
			this.getSystemInfo()
		},
		props: {
			title: [String],
			//分享图标
			isShare: {
				type: [Boolean, String],
				default: false
			},
			//筛选图标
			isScreen: {
				type: [Boolean, String],
				default: false
			},
			button:{
				type: [Boolean, String],
				default: ''
			},
			buttonText:{
				type: [Boolean, String],
				default: '草稿',
			},
			//删除图标
			isDelete: {
				type: [Boolean, String],
				default: false
			},
			//省略号
			isOmit: {
				type: [Boolean, String],
				default: false
			},
			isAll:{
				type: [Boolean, String],
				default: false
			},
			isUnfold:{
				type: [Boolean, String],
				default: false
			},
			//图标
			src:String,

			//隐藏左箭头
			isBackLeft: {
				type: Boolean,
				default: true
			},
			//左边文字颜色
			backTextStyle: {
				type: String,
				default: '#000000'
			},

			//背景透明度
			bgTopImg: {
				type: String,
				default: 'rgba(255, 255, 255, 0)'
			},
			bgColor: {
				type: String,
				default: ''
			},
			//导航标题
			textTitle: {
				type: String,
				default: '#000000'
			},
			//导航透明度
			opacity: {
				type: String,
				default: '1'
			},
			//收藏
			isLike: {
				type: [String, Boolean],
				default: ''
			},
			//导航右侧文字
			titleRightStyle: {
				type: String,
				default: '#000000'
			},
			//导航背景
			bgTitle: {
				type: String,
				default: '#ffffff'
			},
			// 箭头颜色
			backBg: {
				type: String,
				default: '#000000'
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
			avatar: {
				type: String,
				default: ''
			},
			msgIcon: {
				type: String,
				default: ''
			},
			// title: {
			// 	type: String,
			// 	default: '艺盘书画'
			// },
			titleRight: {
				type: String,
				default: ''
			},
			backText: {
				type: String
			},
			//分享图标
			isShareHome: {
				type: [String,Boolean]
			},
			//名师身份
			isTeacherUser: {
				type: [String,Boolean],
				default: false
			}
		},
		mounted() {
			// this.StatusBar = uni.getSystemInfoSync()

			// this.CustomBar = uni.getSystemInfoSync().navigationBarHeight
		},
		methods: {
			//分享
			rightShare() {
				this.$emit('rightShare', '分享')
			},
			//收藏
			rightLike() {
				this.$emit('rightLike', '收藏')
			},
			//文字
			rightForm() {
				this.$emit('rightForm', '编辑文字')
			},	
			shareHome(){
				this.$emit('shareHome', '白色分享图标')
			},
			//编辑状态 - 全部
			allMen(){
				this.$emit('allMen', 'allMen')
			},
			titleMen(){
				this.$emit('titleMen', 'titleMen')
			},


			BackPage() {
				//返回首页

				if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
					let url = '/'
					uni.reLaunch({
						url: url
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}

			},
			//右侧按钮
			rightSubMen() {
				this.$emit('rightSubmit', 'rightSubmit')
			},
			handleToUser() {
				// this.$Router.push('/pages/user/index')
				uni.navigateTo({
					url: '/pages/user/index'
				})
			},
			handleToMessage() {
				// this.$Router.push('/pages/user/index')
				uni.navigateTo({
					url: '/pages/user/message'
				})
			}
		}
	}
</script>

<style lang="scss">
	.cu-bar.fixed,
	.nav.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
	}

	.icon_right {
		width: 40rpx;
		height: 40rpx;
	}
	.button{
		width: 94rpx;
		height: 47rpx;
		background: #FF6B2B;
		opacity: 1;
		border-radius: 24rpx;
		line-height: 47rpx;
		color: white;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
		text-align: center;
	}
</style>
